<!DOCTYPE html>
<!--[if lt IE 9]> <html class="no-js weak" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>MasonJS</title>
		<meta name="author" content="Drew Dahlman (http://www.drewdahlman.com)">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<!-- build:css styles/style.css -->
		<link rel="stylesheet" href="/css/app.css">
		<!-- endbuild -->

	</head>
	<body>

		<div id='grid'>
			<div class='block'>1</div>
			<div class='block'>2</div>
			<div class='block'>3</div>
			<div class='block'>4</div>
			<div class='block'>5</div>
			<div class='block'>6</div>
			<div class='block'>7</div>
			<div class='block'>8</div>
			<div class='block'>9</div>
			<div class='block'>10</div>
			<div class='block'>11</div>
		</div>

		<!-- build:js scripts/vendor.min.js -->
		<script src="/vendor/jquery/dist/jquery.js"></script>
		<!-- endbuild -->

		<!-- build:js scripts/app.min.js -->
		<script src="/js/app.js"></script>
		<!-- endbuild -->

		<!-- build:js scripts/mason.min.js -->
		<script src="/js/mason.js"></script>
		<!-- endbuild -->

		<script>

		//////////////////////////////////////////////
		//
		//	BASIC Example
		//	This example is the most basic,
		//	it is using all default options.
		//
		//////////////////////////////////////////////
		var mason;
		
		$(function(){
			mason = $("#grid").mason({
		      itemSelector: '.block',
		      ratio: 1.2,
		      sizes: [
		        [1,2],
		        [2,1],
		        [2,2]
		      ],
		      layout: 'fluid'
		    })
		});
		</script>

	</body>
</html>